<template>
  <div class="myreview_block_wrapper">
    <div class="myreview_block_inner" style="margin-top: 20px;">
      <div class="check_box_wrapper">
        <div class="check_box_inner" style="max-width: 600px;margin: 0 auto;padding: 0px 20px;display: flex">
          <span style="font-size: 15px;padding-left: 8%;padding-right: 5px;">颠倒 </span>
          <el-switch v-model="reverse" active-color="#13ce66" inactive-color="#ff4949" style="margin-right: 20px;">
          </el-switch>
          <span style="padding-right: 5px">显示翻译</span>
          <el-switch v-model="showfanyi" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
          <div class="" style="">
            <router-link to="/worddetail" style="display: inline-block">
              <i class="el-icon-more" style="font-size: 20px;line-height: 20px;
        padding-left: 60px;" @click="list_item_click(id)"></i>
            </router-link>
          </div>
        </div>
      </div>
      <div class="page_wrapper" style="">
        <div class="page_inner" style="font-weight: bold;color: #2473fc;margin: 20px;">
          {{start}}/{{end}}
        </div>
      </div>
      <div class="heng_wrapper">
        <div class="heng_inner" style="display: flex;max-width: 600px;margin: 0 auto">
          <div class="left_wrapper left_right" >
            <el-button circle icon="el-icon-arrow-left" class="lr_btn" @click=""></el-button>
          </div>
          <div class="center_wrapper" style="margin: 0 auto">
            <div class="src_wrapper" style="line-height: 50px;font-size: 40px;font-weight: bold">
              <span v-show="!reverse">{{src}}</span><span v-show="reverse">{{tgt}}</span>
            </div>
            <div class="tgt_wrapper"  @click="showfanyi = !showfanyi" style="line-height: 110px;height:110px;font-size: 40px;font-weight: bold">
              <span v-show="showfanyi&!reverse" >{{tgt}}</span>
              <span v-show="showfanyi&reverse" >{{src}}</span>
              <span v-show="!showfanyi" style="font-size: 20px;opacity: 0.3;">点击显示翻译</span>
            </div>
          </div>
          <div class="right_wrapper left_right">
            <el-button circle icon="el-icon-arrow-right" class="lr_btn" @click=""></el-button>
          </div>
        </div>
      </div>
      <div class="yes_no_wrapper">
        <div class="yes_no_inner" style="padding-bottom: 20px;">
          <el-button @click="no_click" class="el-icon-error" circle style="padding: 0px;font-size: 50px;color: red;"></el-button>
          <el-button @click="yes_click" class="el-icon-success" circle style="padding: 0px;font-size: 50px;color: rgb(19, 206, 102);"></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
    export default {
      name: "MyReviewBlock",
      data(){
        return {
          id: 0,
          start: 0,
          src: 'src',
          tgt: '翻译',
          showfanyi: true,
          reverse: false
        }
      },
      methods: {
        list_item_click(id){
          console.debug("id: "+id)
          this.$store.commit('setWordDetailId', id)
          window.localStorage.setItem("cur_wordid", id)
        },
        no_click(){
          if(this.start > 0)
          this.start = this.start%this.myreview_find_word_list.length+1
        },
        yes_click(){
          if(this.myreview_find_word_list.length>0){
            this.$store.commit('delete_myreview_word_list', this.start)
            this.$store.commit('setMyReview_Refresh_false')
          }
          // if(this.start == this.end&this.end>0){
          //   this.start = 1
          //
          // }
        }
      },
      computed: {
        ...mapState(['myreview_find_word_list','myreview_refresh']),
        end(){
          // console.debug("computed:--"+JSON.stringify(this.myreview_find_word_list))
          return this.myreview_find_word_list.length
        }
      },
      watch: {
        end(newv, oldv){
          if(newv==0){
            this.start = 0
          }else if(this.start > newv){
            this.start = 1
          }
        },
        start(newv, oldv){
          if(newv > 0){
            this.src = this.myreview_find_word_list[newv-1].src
            this.tgt = this.myreview_find_word_list[newv-1].tgt
            this.id = this.myreview_find_word_list[newv-1].id
          }else{
            this.src = 'null'
            this.tgt = 'null'
          }
        },
        myreview_find_word_list(newv, oldv){
          console.debug("watch : myreview_find_word_list")
          //如果是重新搜索，那么start变为1
          if(newv.length>0&this.myreview_refresh){
            this.start = 1
            if(this.start > 0){
              this.src = this.myreview_find_word_list[this.start-1].src
              this.tgt = this.myreview_find_word_list[this.start-1].tgt
              this.id = this.myreview_find_word_list[this.start-1].id
            }else{
              this.src = 'null'
              this.tgt = 'null'
            }
          }else{
            //yes_btn被按，删除wordlist中的值
            if(this.start > 0){
              this.src = this.myreview_find_word_list[this.start-1].src
              this.tgt = this.myreview_find_word_list[this.start-1].tgt
              this.id = this.myreview_find_word_list[this.start-1].id
            }else{
              this.src = 'null'
              this.tgt = 'null'
            }
          }
        }
      }
    }
</script>

<style scoped>
  .left_right{width: 80px;}
  .lr_btn{
    width: 50px;height: 50px;margin-top: 90px;
  }
</style>
